<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :title="title"
    :size="size"
    :direction="direction"
    :close-on-press-escape="closeOnPressEscape"
    :wrapperClosable="wrapperClosable"
    :destroy-on-close="destroyOnClose"
    :before-close="clearDialog"
    custom-class="tag-drawer catalog-type-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <slot></slot>
      </div>
    </div>
    <slot name="actions">
      <div class="drawer-btns">
        <el-button @click="clearDialog">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
        <slot name="actionBtns"></slot>
      </div>
    </slot>
  </el-drawer>
</template>

<script>
export default {
  name: 'TagDrawer',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    size: {
      type: [Number, String],
      default: '60%'
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    wrapperClosable: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      handler(val) {
        this.drawerVisible = val
      },
      immediate: true
    },
    drawerVisible: {
      handler(val) {
        this.$emit('input', val)
      },
      immediate: true
    }
  },
  data() {
    return {
      drawerVisible: false
    }
  },

  methods: {
    clearDialog() {
      // 关闭
      this.drawerVisible = false
      this.$emit('close')
    },
    submit() {
      // 确定
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped></style>
